<template>
  <div class="take-exam">
    <StudentNavbar :title="examData.subjectName + ' 考试'" />
    
    <div v-if="!examStarted && !showResults">
      <el-card class="exam-info-card">
        <template #header>
          <div class="card-header">
            <h2>{{ examData.subjectName }} 考试信息</h2>
          </div>
        </template>
        
        <div class="exam-info-content">
          <div class="info-item">
            <i class="el-icon-document"></i>
            <div class="info-text">
              <span class="info-label">科目名称</span>
              <span class="info-value">{{ examData.subjectName }}</span>
            </div>
          </div>
          
          <div class="info-item">
            <i class="el-icon-time"></i>
            <div class="info-text">
              <span class="info-label">考试时长</span>
              <span class="info-value">{{ examData.duration }} 分钟</span>
            </div>
          </div>
          
          <div class="info-stats">
            <div class="stat-item">
              <div class="stat-icon bg-blue">
                <i class="el-icon-edit"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ examData.questions.choice?.length || 0 }}</div>
                <div class="stat-label">选择题</div>
              </div>
            </div>
            
            <div class="stat-item">
              <div class="stat-icon bg-green">
                <i class="el-icon-help"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ examData.questions.judgment?.length || 0 }}</div>
                <div class="stat-label">判断题</div>
              </div>
            </div>
            
            <div class="stat-item">
              <div class="stat-icon bg-purple">
                <i class="el-icon-edit-outline"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ examData.questions.fill?.length || 0 }}</div>
                <div class="stat-label">填空题</div>
              </div>
            </div>
          </div>
          
          <div class="start-button-container">
            <el-button type="primary" @click="continueExam" size="large" round>
              继续考试
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
    
    <div v-else-if="showResults">
      <el-card class="results-card">
        <template #header>
          <div class="results-header">
            <h2>{{ examData.subjectName }} 考试结果</h2>
            <el-button 
              type="primary" 
              @click="generateReport" 
              :loading="generatingReport"
              size="small">
              生成智能报告
            </el-button>
          </div>
        </template>
        
        <!-- 选择题结果 -->
        <div v-if="examResults.choice && examResults.choice.length > 0">
          <h3>选择题</h3>
          <div v-for="(item, index) in examResults.choice" :key="'result_choice_' + item.questionId" class="result-item">
            <p><strong>{{ getQuestionNumber('choice', index) }}. {{ item.questionContent }}</strong></p>
            <p :class="{ 'correct-answer': item.isCorrect, 'incorrect-answer': !item.isCorrect }">
              <span>你的答案: {{ item.studentAnswer }}</span>
              <span v-if="!item.isCorrect"> | 正确答案: {{ item.correctAnswer }}</span>
            </p>
            <el-tag :type="item.isCorrect ? 'success' : 'danger'" size="mini">
              {{ item.isCorrect ? '正确' : '错误' }}
            </el-tag>
            <el-button 
              v-if="!item.isCorrect" 
              size="mini" 
              @click="analyzeQuestion('choice', item)"
              :loading="analyzingQuestionId === 'choice_' + item.questionId"
              style="margin-left: 10px;">
              错题分析
            </el-button>
            <div v-if="item.analysis" class="analysis-result">
              <pre>{{ item.analysis }}</pre>
            </div>
          </div>
        </div>
        
        <!-- 判断题结果 -->
        <div v-if="examResults.judgment && examResults.judgment.length > 0">
          <h3>判断题</h3>
          <div v-for="(item, index) in examResults.judgment" :key="'result_judgment_' + item.questionId" class="result-item">
            <p><strong>{{ getQuestionNumber('judgment', index) }}. {{ item.questionContent }}</strong></p>
            <p :class="{ 'correct-answer': item.isCorrect, 'incorrect-answer': !item.isCorrect }">
              <span>你的答案: {{ item.studentAnswer === '1' ? '正确' : '错误' }}</span>
              <span v-if="!item.isCorrect"> | 正确答案: {{ item.correctAnswer === '1' ? '正确' : '错误' }}</span>
            </p>
            <el-tag :type="item.isCorrect ? 'success' : 'danger'" size="mini">
              {{ item.isCorrect ? '正确' : '错误' }}
            </el-tag>
            <el-button 
              v-if="!item.isCorrect" 
              size="mini" 
              @click="analyzeQuestion('judgment', item)"
              :loading="analyzingQuestionId === 'judgment_' + item.questionId"
              style="margin-left: 10px;">
              错题分析
            </el-button>
            <div v-if="item.analysis" class="analysis-result">
              <pre>{{ item.analysis }}</pre>
            </div>
          </div>
        </div>
        
        <!-- 填空题结果 -->
        <div v-if="examResults.fill && examResults.fill.length > 0">
          <h3>填空题</h3>
          <div v-for="(item, index) in examResults.fill" :key="'result_fill_' + item.questionId" class="result-item">
            <p><strong>{{ getQuestionNumber('fill', index) }}. {{ item.questionContent }}</strong></p>
            <p :class="{ 'correct-answer': item.isCorrect, 'incorrect-answer': !item.isCorrect }">
              <span>你的答案: {{ item.studentAnswer }}</span>
              <span v-if="!item.isCorrect"> | 正确答案: {{ item.correctAnswer }}</span>
            </p>
            <el-tag :type="item.isCorrect ? 'success' : 'danger'" size="mini">
              {{ item.isCorrect ? '正确' : '错误' }}
            </el-tag>
            <el-button 
              v-if="!item.isCorrect" 
              size="mini" 
              @click="analyzeQuestion('fill', item)"
              :loading="analyzingQuestionId === 'fill_' + item.questionId"
              style="margin-left: 10px;">
              错题分析
            </el-button>
            <div v-if="item.analysis" class="analysis-result">
              <pre>{{ item.analysis }}</pre>
            </div>
          </div>
        </div>
        
        <div class="result-actions">
          <el-button type="primary" @click="goToExamRecords">查看考试记录</el-button>
        </div>
      </el-card>
    </div>
    
    <div v-else>
      <div class="exam-header">
        <div class="timer">剩余时间: {{ formatTime(remainingTime) }}</div>
        <el-button type="primary" @click="submitExam">提交试卷</el-button>
      </div>
      
      <!-- 选择题 -->
      <div v-if="examData.questions.choice && examData.questions.choice.length > 0">
        <h3>选择题</h3>
        <div v-for="(question, index) in examData.questions.choice" :key="question.id" class="question-block">
          <p><strong>{{ getQuestionNumber('choice', index) }}. {{ question.questionContent }}</strong></p>
          <el-input 
            v-model="answers.choice['choice_' + question.id]" 
            placeholder="请输入选项（如 A、B、C、D）">
          </el-input>
          <el-button size="small" @click="saveSingleAnswer('choice', question)" style="margin-top: 10px;">保存答案</el-button>
        </div>
      </div>
      
      <!-- 判断题 -->
      <div v-if="examData.questions.judgment && examData.questions.judgment.length > 0">
        <h3>判断题</h3>
        <div v-for="(question, index) in examData.questions.judgment" :key="question.id" class="question-block">
          <p><strong>{{ getQuestionNumber('judgment', index) }}. {{ question.questionContent }}</strong></p>
          <el-select v-model="answers.judgment['judgment_' + question.id]" placeholder="请选择">
            <el-option label="正确" value="1"></el-option>
            <el-option label="错误" value="0"></el-option>
          </el-select>
          <el-button size="small" @click="saveSingleAnswer('judgment', question)" style="margin-top: 10px;">保存答案</el-button>
        </div>
      </div>
      
      <!-- 填空题 -->
      <div v-if="examData.questions.fill && examData.questions.fill.length > 0">
        <h3>填空题</h3>
        <div v-for="(question, index) in examData.questions.fill" :key="question.id" class="question-block">
          <p><strong>{{ getQuestionNumber('fill', index) }}. {{ question.questionContent }}</strong></p>
          <el-input 
            v-model="answers.fill['fill_' + question.id]" 
            placeholder="请输入答案">
          </el-input>
          <el-button size="small" @click="saveSingleAnswer('fill', question)" style="margin-top: 10px;">保存答案</el-button>
        </div>
      </div>
      
      <div class="submit-section">
        <el-button type="primary" @click="submitExam">提交试卷</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import StudentAPI from '@/api/student'
import StudentNavbar from '@/components/StudentNavbar.vue'

export default {
  name: 'TakeExam',
  components: {
    StudentNavbar
  },
  data() {
    return {
      examData: {
        studentId: null,
        subjectId: null,
        subjectName: '',
        questions: {
          choice: [],
          judgment: [],
          fill: []
        },
        createTime: '',
        duration: 0,
        answers: {} // 添加这个字段用于存储后端返回的初始答案
      },
      examStarted: false,
      showResults: false,
      remainingTime: 0, // 剩余时间（秒）
      timer: null,
      answers: {
        choice: {},
        judgment: {},
        fill: {}
      },
      examResults: {
        choice: [],
        judgment: [],
        fill: []
      },
      analyzingQuestionId: null, // 正在分析的题目ID
      generatingReport: false,   // 是否正在生成报告
    }
  },
  created() {
    // 从路由参数获取科目ID
    const subjectId = this.$route.params.subjectId
    if (subjectId) {
      this.fetchExamPaper(subjectId)
    }
  },
  mounted() {
    // 添加页面卸载前的事件监听器
    window.addEventListener('beforeunload', this.beforeUnloadHandler)
  },
  beforeUnmount() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
    
    // 移除事件监听器
    window.removeEventListener('beforeunload', this.beforeUnloadHandler)
  },
  methods: {
    // 获取试卷信息（考试开始前的基本信息）
    async fetchExamPaper(subjectId) {
      try {
        // 使用getExam接口获取考试基本信息（不是开始考试）
        const res = await StudentAPI.getExam(subjectId)
        if (res.data.code === 200 && res.data.msg === 'success') {
          this.examData = res.data.data
          // 初始化答案对象
          this.initializeAnswers()
          // 设置考试状态为已开始（因为是继续正在进行的考试）
          this.examStarted = true;
          // 计算剩余时间
          this.calculateRemainingTime();
          // 启动计时器
          this.startTimer();
        } else {
          this.$message.error(res.data.message || '获取试卷失败')
        }
      } catch (error) {
        console.error('获取试卷失败:', error)
        this.$message.error('获取试卷失败: ' + (error.response?.data?.message || error.message))
      }
    },
    
    // 初始化答案对象
    initializeAnswers() {
      // 初始化选择题答案
      if (this.examData.questions.choice) {
        this.examData.questions.choice.forEach(question => {
          const key = 'choice_' + question.id;
          // 如果后端有提供初始答案则使用，否则初始化为空字符串
          if (this.examData.answers && this.examData.answers[key]) {
            this.answers.choice[key] = this.examData.answers[key];
          } else if (!Object.prototype.hasOwnProperty.call(this.answers.choice, key)) {
            this.answers.choice[key] = ''
          }
        })
      }
      
      // 初始化判断题答案
      if (this.examData.questions.judgment) {
        this.examData.questions.judgment.forEach(question => {
          const key = 'judgment_' + question.id;
          // 如果后端有提供初始答案则使用，否则初始化为空字符串
          if (this.examData.answers && this.examData.answers[key]) {
            this.answers.judgment[key] = this.examData.answers[key];
          } else if (!Object.prototype.hasOwnProperty.call(this.answers.judgment, key)) {
            this.answers.judgment[key] = ''
          }
        })
      }
      
      // 初始化填空题答案
      if (this.examData.questions.fill) {
        this.examData.questions.fill.forEach(question => {
          const key = 'fill_' + question.id;
          // 如果后端有提供初始答案则使用，否则初始化为空字符串
          if (this.examData.answers && this.examData.answers[key]) {
            this.answers.fill[key] = this.examData.answers[key];
          } else if (!Object.prototype.hasOwnProperty.call(this.answers.fill, key)) {
            this.answers.fill[key] = ''
          }
        })
      }
      
      // 处理后端返回的已保存答案（新的数据结构）
      this.processSavedAnswers();
      
      // 计算并设置剩余时间
      this.calculateRemainingTime();
    },
    
    // 处理后端返回的已保存答案
    processSavedAnswers() {
      // 处理选择题答案
      if (this.examData.answers && this.examData.answers.choice) {
        this.examData.answers.choice.forEach(answer => {
          const key = 'choice_' + answer.questionId;
          if (Object.prototype.hasOwnProperty.call(this.answers.choice, key)) {
            this.answers.choice[key] = answer.content;
          }
        });
      }
      
      // 处理判断题答案
      if (this.examData.answers && this.examData.answers.judgment) {
        this.examData.answers.judgment.forEach(answer => {
          const key = 'judgment_' + answer.questionId;
          if (Object.prototype.hasOwnProperty.call(this.answers.judgment, key)) {
            this.answers.judgment[key] = answer.content;
          }
        });
      }
      
      // 处理填空题答案
      if (this.examData.answers && this.examData.answers.fill) {
        this.examData.answers.fill.forEach(answer => {
          const key = 'fill_' + answer.questionId;
          if (Object.prototype.hasOwnProperty.call(this.answers.fill, key)) {
            this.answers.fill[key] = answer.content;
          }
        });
      }
    },
    
    // 计算剩余时间
    calculateRemainingTime() {
      // 解析创建时间
      const createTime = new Date(this.examData.createTime);
      // 当前时间
      const now = new Date();
      // 考试时长（转换为毫秒）
      const durationMs = this.examData.duration * 60 * 1000;
      // 考试结束时间
      const endTime = new Date(createTime.getTime() + durationMs);
      // 计算剩余时间（毫秒）
      const remainingMs = endTime.getTime() - now.getTime();
      // 转换为秒
      this.remainingTime = Math.max(0, Math.floor(remainingMs / 1000));
    },
    
    // 启动计时器
    startTimer() {
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--
        } else {
          // 时间到，自动提交试卷
          this.autoSubmitExam()
        }
      }, 1000)
    },
    
    // 格式化时间显示
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    },
    
    // 保存单题答案
    async saveSingleAnswer(questionType, question) {
      try {
        // 获取当前题目的答案
        const key = questionType + '_' + question.id;
        let answerValue = '';
        
        // 根据题型获取答案
        switch(questionType) {
          case 'choice':
            answerValue = this.answers.choice[key] || '';
            break;
          case 'judgment':
            answerValue = this.answers.judgment[key] || '';
            break;
          case 'fill':
            answerValue = this.answers.fill[key] || '';
            break;
        }
        
        // 构造答案对象
        const answerData = {
          subjectId: this.examData.subjectId,  // 题目所属科目ID
          questionType: questionType,          // 题目类型
          questionId: question.id,             // 题目ID
          content: answerValue,                // 答案内容文本等
          answerTime: Date.now()               // 答题时间戳
        };
        
        // 调用API保存答案
        const res = await StudentAPI.saveAnswer(answerData);
        if (res.data.code === 200) {
          this.$message.success('答案保存成功');
        } else {
          this.$message.error(res.data.message || '答案保存失败');
        }
      } catch (error) {
        console.error('保存答案失败:', error);
        this.$message.error('保存答案失败: ' + (error.response?.data?.message || error.message));
      }
    },
    
    // 继续考试（用于正在进行的考试）
    continueExam() {
      // 设置考试状态为已开始
      this.examStarted = true;
      // 计算剩余时间
      this.calculateRemainingTime();
      // 启动计时器
      this.startTimer();
    },
    
    // 用户手动提交试卷
    async submitExam() {
      try {
        // 清除计时器
        if (this.timer) {
          clearInterval(this.timer)
        }
        
        // 调用提交试卷接口
        const res = await StudentAPI.submitExam(this.examData.subjectId);
        if (res.data.code === 200) {
          // 显示考试结果
          this.showResults = true;
          this.examResults = res.data.data;
          this.examStarted = false;
        } else {
          this.$message.error(res.data.message || '试卷提交失败');
        }
      } catch (error) {
        console.error('提交试卷失败:', error);
        this.$message.error('试卷提交失败: ' + (error.response?.data?.message || error.message))
      }
    },
    
    // 自动提交试卷（时间到）
    async autoSubmitExam() {
      try {
        // 清除计时器
        if (this.timer) {
          clearInterval(this.timer)
        }
        
        // 调用提交试卷接口
        const res = await StudentAPI.submitExam(this.examData.subjectId);
        if (res.data.code === 200) {
          this.$message.success('考试时间到，试卷已自动提交！')
          // 显示考试结果
          this.showResults = true;
          this.examResults = res.data.data;
          this.examStarted = false;
        } else {
          this.$message.error(res.data.message || '试卷自动提交失败');
        }
      } catch (error) {
        console.error('自动提交试卷失败:', error);
        this.$message.error('试卷自动提交失败: ' + (error.response?.data?.message || error.message));
      }
    },
    
    // 跳转到考试记录页面
    goToExamRecords() {
      this.$router.push('/student/exam-records');
    },
    
    // 错题分析
    async analyzeQuestion(questionType, item) {
      try {
        // 设置正在分析的题目ID，用于显示loading状态
        this.analyzingQuestionId = questionType + '_' + item.questionId;
        
        // 构造错题分析请求数据
        const answerDetail = {
          isCorrect: item.isCorrect,           // 是否正确
          studentAnswer: item.studentAnswer,   // 学生答案
          correctAnswer: item.correctAnswer,   // 正确答案
          questionContent: item.questionContent // 题目内容
        };
        
        // 调用错题分析接口
        const res = await StudentAPI.analyzeQuestion(answerDetail);
        if (res.data.code === 200) {
          // 将分析结果添加到对应的题目对象中
          item.analysis = res.data.data;
        } else {
          this.$message.error(res.data.message || '错题分析失败');
        }
      } catch (error) {
        console.error('错题分析失败:', error);
        this.$message.error('错题分析失败: ' + (error.response?.data?.message || error.message));
      } finally {
        // 清除正在分析的题目ID
        this.analyzingQuestionId = null;
      }
    },
    
    // 生成智能报告
    async generateReport() {
      try {
        this.generatingReport = true;
        this.$message.info('智能报告正在生成中，请勿离开当前页面...');
        
        // 构造报告数据
        const correctExam = {
          choice: this.examResults.choice || [],
          fill: this.examResults.fill || [],
          judgement: this.examResults.judgment || []
        };
        
        // 调用生成报告接口
        const res = await StudentAPI.generateReport(correctExam);
        if (res.data.code === 200) {
          // 直接下载报告
          this.downloadReport(res.data.data);
        } else {
          this.$message.error(res.data.message || '生成报告失败');
        }
      } catch (error) {
        console.error('生成报告失败:', error);
        this.$message.error('生成报告失败: ' + (error.response?.data?.message || error.message));
      } finally {
        this.generatingReport = false;
      }
    },
    
    // 下载报告为 Markdown 文件
    downloadReport(content) {
      if (!content) {
        this.$message.warning('报告内容为空');
        return;
      }
      
      // 创建 Blob 对象
      const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
      
      // 创建下载链接
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `${this.examData.subjectName}_智能学习报告.md`;
      
      // 触发下载
      link.click();
      
      // 清理 URL 对象
      URL.revokeObjectURL(link.href);
      
      this.$message.success('智能报告已下载到您的本地！');
    },
    
    // 页面卸载前的处理函数
    beforeUnloadHandler(e) {
      if (this.generatingReport) {
        // 如果正在生成报告，阻止用户离开页面
        const message = '智能报告正在生成中，离开页面将导致下载失败。确定要离开吗？';
        e.returnValue = message;
        return message;
      }
    },
    
    // 获取题目编号（在整个试卷中的连续编号）
    getQuestionNumber(questionType, index) {
      let offset = 1 + index; // 默认从1开始
      
      // 根据题型类型计算偏移量
      switch(questionType) {
        case 'choice':
          // 选择题不需要偏移
          break;
        case 'judgment':
          // 判断题需要加上选择题数量
          offset += (this.examData.questions.choice?.length || 0);
          break;
        case 'fill':
          // 填空题需要加上选择题和判断题数量
          offset += (this.examData.questions.choice?.length || 0);
          offset += (this.examData.questions.judgment?.length || 0);
          break;
      }
      
      return offset;
    },
  }
}
</script>

<style scoped>
.take-exam {
  padding: 20px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  min-height: calc(100vh - 40px);
}

.exam-info-card {
  max-width: 600px;
  margin: 50px auto;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header {
  text-align: center;
  padding: 20px;
}

.card-header h2 {
  margin: 0;
  color: #333;
  font-size: 1.8rem;
}

.exam-info-content {
  padding: 30px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.info-item i {
  font-size: 24px;
  margin-right: 15px;
  color: #409eff;
  width: 40px;
  height: 40px;
  background: #e8f4ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-text {
  flex: 1;
}

.info-label {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 5px;
}

.info-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.info-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: white;
  font-size: 20px;
}

.bg-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-green {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.bg-purple {
  background: linear-gradient(135deg, #926dde 0%, #7f41d1 100%);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #333;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
}

.start-button-container {
  text-align: center;
  margin-top: 20px;
}

.start-button-container .el-button {
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  box-shadow: 0 5px 15px rgba(64, 158, 255, 0.4);
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.timer {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd700;
}

.question-block {
  margin-bottom: 25px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.question-block p {
  margin-bottom: 15px;
}

.submit-section {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
}

.results-card {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.results-header h2 {
  margin: 0;
  color: #333;
}

.result-item {
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
  background-color: #fafafa;
}

.correct-answer {
  color: #67c23a;
}

.incorrect-answer {
  color: #f56c6c;
}

.result-actions {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
}

.analysis-result {
  margin-top: 15px;
  padding: 15px;
  background-color: #e8f4ff;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.analysis-result pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: inherit;
}

@media (max-width: 768px) {
  .info-stats {
    grid-template-columns: 1fr;
  }
  
  .exam-info-card {
    margin: 20px;
  }
  
  .exam-info-content {
    padding: 20px;
  }
  
  .stat-item {
    padding: 15px 5px;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
}
</style>